<template>
	<view class="content_">
		<scroll-view style="width: 500rpx;" class="scroll-view_H" scroll-x="true" show-scrollbar="flase"
			scroll-with-animation :scroll-left="scrollleft">
			<view class="echarts" id="myEchart" :prop="option" :change:prop="echarts.update" @click="echarts.onClick">
			</view>
		</scroll-view>
		<view class="detail">
			<view class="text " style="margin-right: 10px;">2023</view>
			<view class="text" style="margin-left: 10px;">2024</view>
		</view>
	</view>
</template>


<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts';
	export default {
		data() {
			return {
				options: {
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '1月'],
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value',
						show: false
					}],
					series: [{
						name: 'Direct',
						type: 'bar',
						barWidth: '60%',
						data: [{
								value: 120,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 150,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 20,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							}, {
								value: 70,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							}, {
								value: 200,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							}, {
								value: 60,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							}, {
								value: 100,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 60,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 80,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 60,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 40,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 70,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							},
							{
								value: 80,
								itemStyle: {
									color: '#c2dece'
								},
								label: {
									show: true,
									position: 'top',
									textStyle: {
										fontSize: '14px',
										color: '#c2dece'
									},
									formatter: '￥{c}'
								},
							}
						],
						barWidth: 30,

					}],
					dataZoom: [{
						type: 'slider', // 数据影像滑动条
						xAxisIndex: 1, // 应用于第一个 x 轴
						start: 0, // 左边在 0% 的位置
						end: 10 // 右边在 10% 的位置
					}, {
						type: 'inside', // 数据影像区域
						xAxisIndex: 1, // 应用于第一个 x 轴
						start: 0, // 左边在 0% 的位置
						end: 10 // 右边在 10% 的位置
					}]
				},
				chart: null,
				clickData: null, // echarts点击事件的值
				scrollleft: 100
			}
		},
		created() {
			uni.request({
				url: 'http://49.235.178.112:8081/api/userBill/exitsBill',
				method:'POST',
				data: {
					transferUserId: '1766664466550726558'
				},
				success: (res) => {
					console.log(res.data);
					this.text = 'request success';
				}
			});
		},
		mounted() {
			console.log('实例化echart1')
			if (typeof window.echarts === 'object') {
				this.init()
			} else {
				// 动态引入类库
				const script = document.createElement('script')
				// script.src = 'echarts/echarts.min.js' 
				script.onload = this.init()
				document.head.appendChild(script)
			}
		},
		methods: {
			scroll: function(e) {
				console.log(e)
			},
			/**
			 * 初始化echarts
			 */
			init() {
				console.log('实例化echart2')
				console.log('this.option', this.options)
				let that = this
				// 根据id初始化图表
				this.chart = echarts.init(document.getElementById('myEchart'))
				this.$emit('myChart', this.chart)
				this.update(this.options)
				// echarts的点击事件
				this.chart.on('click', params => {
					// 把点击事件的数据缓存下来
					this.clickData = params
					// console.log(params)
					var clickedIndex = params.dataIndex;
					var clickedSeriesIndex = params.seriesIndex;
					// 获取当前系列的所有数据项
					// console.log('option', JSON.stringify(that.options.series[clickedSeriesIndex]))
					var series = that.options.series[clickedSeriesIndex];
					var data = series.data;
					// 遍历数据项，如果索引匹配，则更改其颜色
					for (var i = 0; i < data.length; i++) {
						if (i === clickedIndex) {
							// 变换颜色，
							data[i].itemStyle.color = data[i].itemStyle.color === '#c2dece' ? '#52b26b' :
								'#c2dece';
							data[i].label.textStyle.color = '#52b26b'
						} else {
							// 可以选择将其他数据项重置为原始颜色，或者保持不变
							// data[i].itemStyle.color = originalColor;
							data[i].itemStyle.color = '#c2dece'
							data[i].label.textStyle.color = '#c2dece'
						}
					}
					let xAxisIndex = params.xAxisIndex; // X轴索引
					let yAxisIndex = params.yAxisIndex; // Y轴索引
					let pixelValue = this.chart.convertToPixel({
						seriesIndex: params.seriesIndex
					}, [clickedIndex, 0])[0];
					console.log('点击的柱子在X轴上的像素位置:', pixelValue);
					that.scrollleft = pixelValue / 2;
					console.log('scrollleft', that.scrollleft);
					// 获取被点击的柱状图的数据索引
					var dataIndex = params.dataIndex;

					// 更新 dataZoom 的 start 和 end 值，实现定位滑动
					// 这里可以根据你的需求来调整 start 和 end 的值
					var start = dataIndex * 0.1; // 假设每个柱子占据 10% 的宽度
					var end = start + 0.1; // 定位到被点击的柱子

					// 更新 option 中的 dataZoom 配置
					that.options.dataZoom[0].start = start;
					that.options.dataZoom[0].end = end;
					that.options.dataZoom[1].start = start;
					that.options.dataZoom[1].end = end;
					// 使用更新后的option重新设置图表
					that.chart.setOption(that.options);
				})
			},
			/**
			 * 点击事件，可传递到外部
			 * @param {Object} event
			 * @param {Object} instance
			 */
			onClick(event, instance) {
				console.log("onClick")
				if (this.clickData) {
					// 把echarts点击事件相关的值传递到renderjs外
					instance.callMethod('onViewClick', {
						value: this.clickData.data,
						name: this.clickData.name,
						seriesName: this.clickData.seriesName
					})
					// 上次点击数据置空
					this.clickData = null
				}
			},
			/**
			 * 监测数据更新
			 * @param {Object} option
			 */
			update(option) {
				if (this.chart) {
					// 因App端，回调函数无法从renderjs外传递，故在此自定义设置相关回调函数
					if (option) {
						// tooltip
						if (option.tooltip) {
							// 判断是否设置tooltip的位置
							if (option.tooltip.positionStatus) {
								option.tooltip.position = this.tooltipPosition()
							}
							// 判断是否格式化tooltip
							if (option.tooltip.formatterStatus) {
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option
									.tooltip.formatFloat2, option.tooltip.formatThousands)
							}
						}
						// 颜色渐变
						if (option.series) {
							for (let i in option.series) {
								let linearGradient = option.series[i].linearGradient
								if (linearGradient) {
									option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],
										linearGradient[1], linearGradient[2], linearGradient[3], linearGradient[4])
								}
							}
						}
					}
					// 设置新的option
					this.chart.setOption(option, option.notMerge)
				}
			},
			/**
			 * 设置tooltip的位置，防止超出画布
			 */
			tooltipPosition() {
				return (point, params, dom, rect, size) => {
					// 其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
					let x = point[0]
					let y = point[1]
					let viewWidth = size.viewSize[0]
					let viewHeight = size.viewSize[1]
					let boxWidth = size.contentSize[0]
					let boxHeight = size.contentSize[1]
					let posX = 0 // x坐标位置
					let posY = 0 // y坐标位置
					if (x >= boxWidth) { // 左边放的下
						posX = x - boxWidth - 1
					}
					if (y >= boxHeight) { // 上边放的下
						posY = y - boxHeight - 1
					}
					return [posX, posY]
				}
			},
			/**
			 * tooltip格式化
			 * @param {Object} unit 数值后的单位
			 * @param {Object} formatFloat2 是否保留两位小数
			 * @param {Object} formatThousands 是否添加千分位
			 */
			tooltipFormatter(unit, formatFloat2, formatThousands) {
				return params => {
					let result = ''
					unit = unit ? unit : ''
					for (let i in params) {
						if (i == 0) {
							result += params[i].axisValueLabel
						}
						let value = '--'
						if (params[i].data !== null) {
							value = params[i].data
							// 保留两位小数
							if (formatFloat2) {
								value = this.formatFloat2(value)
							}
							// 添加千分位
							if (formatThousands) {
								value = this.formatThousands(value)
							}
						}
						// #ifdef H5
						result += '\n' + params[i].seriesName + '：' + value + ' ' + unit
						// #endif

						// #ifdef APP-PLUS
						result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value + ' ' + unit
						// #endif
					}
					return result
				}
			},
			/**
			 * 保留两位小数
			 * @param {Object} value
			 */
			formatFloat2(value) {
				let temp = Math.round(parseFloat(value) * 100) / 100
				let xsd = temp.toString().split('.')
				if (xsd.length === 1) {
					temp = (isNaN(temp) ? '0' : temp.toString()) + '.00'
					return temp
				}
				if (xsd.length > 1) {
					if (xsd[1].length < 2) {
						temp = temp.toString() + '0'
					}
					return temp
				}
			},
			/**
			 * 添加千分位
			 * @param {Object} value
			 */
			formatThousands(value) {
				if (value === undefined || value === null) {
					value = ''
				}
				if (!isNaN(value)) {
					value = value + ''
				}
				let re = /\d{1,3}(?=(\d{3})+$)/g
				let n1 = value.replace(/^(\d+)((\.\d+)?)$/, function(s, s1, s2) {
					return s1.replace(re, '$&,') + s2
				})
				return n1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_ {
		.uni-scroll-view::-webkit-scrollbar {
			display: none !important;
		}

		.echarts {
			width: 1000px;
			height: 300px;
		}

		.detail {
			width: 100%;
			display: flex;
			justify-content: center;
			font-size: 14px;
			color: gray;
		}

		.selected {
			color: #52b26b;
		}
	}
</style>